<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <title>过渡和动画</title>
    <style>
        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */
        .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
            opacity: 0
        }
/* v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。
                这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，
                在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，
                在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，
                在过渡/动画完成之后移除。 */

        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
        }
    </style>
</head>
<body>
    <div id="ap">
        <!-- <button v-on:click="show = !show">点我</button>
        <transition name="fade">
            <p v-show="show" v-bind:style="jian">渐浅渐深</p>
        </transition> -->

        <button v-on:click = "show = !show">点我</button>
        <!-- <transition name="bounce"> -->
        <!-- 与第三方库animated结合 -->
        <!--类名有 
            enter-class
            enter-active-class
            enter-to-class (2.1.8+)
            leave-class
            leave-active-class
            leave-to-class (2.1.8+) -->
        <transition
            name="custom-classes-transition"
            enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight"
        >
            <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
        </transition>

    </div>
</body>
<script>
    // 过渡
    // 插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
    // new Vue({
    //     el:'#ap',
    //     data: {
    //         show:true,
    //         jian: {
    //             fontSize:'30px',
    //             color:'red'
    //         }
    //     }
    // })

    //动画
    // 类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
    new Vue({
        el: '#ap',
        data: {
            show: true
        }
    })

    //同时使用的话，Vue通过transitionend 或 animationend其中之一设计监听事件 
    //一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。
    //在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

    //过渡持续时间
    //特例：我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
    //在这种情况下你可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
        //<transition :duration="1000">...</transition>
    //你也可以定制进入和移出的持续时间：
        //<transition :duration="{ enter: 500, leave: 800 }">...</transition>
</script>
</html>